<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="cache-control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			//在这里使用javaScript语言发起ajax请求，访问服务器AjaxServlet中JavaScriptAjax
			function ajaxRequest() {
				// 1、我们首先要创建XMLHttpRequest
				var xmlHttpRequest = new XMLHttpRequest();
				// 2、调用open方法设置请求参数
					// method：请求的类型；GET 或 POST
					// url：文件在服务器上的位置
					// async：true（异步）或 false（同步）  同步讲究顺序   异步同时进行不会等待
				xmlHttpRequest.open("GET", "http://localhost:8080/10_json_ajax_i18n/ajaxServlet?action=javaScriptAjax", true);
				// 4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
				xmlHttpRequest.onreadystatechange = function () {
					if (xmlHttpRequest.readyState === 4 && xmlHttpRequest.status === 200) {
						alert("收到服务器返回的数据：" + xmlHttpRequest.responseText);
						var jsonObj = JSON.parse(xmlHttpRequest.responseText);
						//把响应的数据显示在页面上
						document.getElementById("div01").innerHTML = "编号: " + jsonObj.id + "<br/>姓名: " + jsonObj.name;
					}
				};
				// 3、调用send方法发送请求   将请求发送给服务器
				xmlHttpRequest.send();

				alert("这是最后一行代码")
			}
		</script>
	</head>
	<body>
		<a href="http://localhost:8080/10_json_ajax_i18n/ajaxServlet?action=javaScriptAjax">非Ajax</a>
		<!--同步的话点击一个按钮，其他按钮就没有用了，卡死等待点击的那个按钮事件完成-->
		<button onclick="ajaxRequest()">ajax request</button>
		<button onclick="ajaxRequest()">ajax request</button>
		<button onclick="ajaxRequest()">ajax request</button>
		<button onclick="ajaxRequest()">ajax request</button>
		<button onclick="ajaxRequest()">ajax request</button>
		<div id="div01">

		</div>
		<table border="1">
			<tr>
				<td>1.1</td>
				<td>1.2</td>
			</tr>
			<tr>
				<td>2.1</td>
				<td>2.2</td>
			</tr>
		</table>
	</body>
</html>